<template>
    <div class="ding_dan">
        <div class="title_side">
            <div class="title">
                <img @click="go_back" class="fan_hui" src="../lmx/image/return.png" alt="">
                <span>订单详情</span>
            </div>
            <div class="ding_wei">
                <div class="ding_wei_side">
                    <div class="nei_bu">
                        <img style="width: 40px;height: 40px;" src="../lmx/image/address.png" alt="">
                        <div class="right">
                            <div class="buyer">
                                <span>111</span>
                                <span>15237140196</span>
                            </div>
                            <div class="address">
                                <span>北京市 东城区 11</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="xia">
            <div class="one_side">
                <div class="one">
                    <div class="yi">
                        <img style="width: 90px;height: 90px;border-radius: 4px;" src="../lmx/image/11.jpeg" alt="">
                        <div class="introduce">
                            <span class="zi">111111111</span>
                            <span class="yan_se">粉色</span>
                            <div class="price">
                                <span style="font-size: 14px;color: red;" >￥99</span>
                                <span style="font-size: 12px;color: #999;">x 1</span>
                            </div>
                        </div>
                    </div>
                    <div class="er">
                        <span style="font-size: 14px;color: black;">配送方式</span>
                        <span style="font-size: 14px;color: #999;">免运费</span>
                    </div>
                    <div class="san">
                        <span style="font-size: 14px;color: black;">订单总价</span>
                        <span style="font-size: 14px;color: red;">￥99</span>
                    </div>
                </div>
            </div>
            <div class="two_side">
                <div class="two">
                    <div class="ding_dan_title">
                        <div style="width: 2px;height:10px ;background-color: red;border-radius: 6px;"></div>
                        <span style="margin-left: 10px;">订单详情</span>
                    </div>
                    <div class="ding_dan_hao">
                        <span style="color: #999;">订单号</span>
                        <div class="lian_jie">
                            <span style="color: #999;">11233545633545</span>
                            <span style="color: #999;margin-left: 10px;">复制</span>
                        </div>
                    </div>
                    <div class="shi_jian">
                        <span style="color: #999;">创建时间</span>
                        <span style="color: #999;">2022-09-30</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
function go_back(){
    router.go(-1)
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.ding_dan{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    
}
.title_side{
    width: 100%;
    height: 105px;
    background-color: #ee554d;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    position: relative;
}
.title{
    width: 95%;
    height: 40px;
    /* background-color: blue; */
    position: relative;
    margin: 0 auto;
}
.fan_hui{
    width:25px ;
    height: 25px;
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    margin-left: 5px;
}
.title>span{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10.4px;
    margin-left: -24px;
    color: aliceblue;
}
.ding_wei{
    width: 90%;
    height: 100px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 2px 2px 10px #909090;
    position: absolute;
    top: 55px;
    left: 20px;
}
.ding_wei_side{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    /* background-color:cadetblue ; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.nei_bu{
    width: 95%;
    height: 75%;
    /* background-color: antiquewhite; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nei_bu>.right{
    width: 267px;
    height: 100%;
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
}
.buyer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.buyer>span{
    font-size: 19px;
    color: #646566;
}
.address{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.address>span{
    font-size: 14px;
    color: #999;
}
.xia{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.one_side{
    width: 100%;
    /* height: 300px; */
    border-bottom: 10px solid #f2f3f5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.one{
    width: 95%;
    /* height: 250px; */
    /* background-color: blanchedalmond; */
    margin-top: 64px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;

}
.yi{
    width: 100%;
    height: 90px;
    /* background-color: blue; */
    margin-bottom: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.introduce{
    width: 251px;
    height: 100%;
    /* background-color: bisque; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.zi{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all;
    -webkit-box-orient: vertical;
}
.price{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.er{
    width: 100%;
    height: 50px;
    border-top: 1px solid #f2f3f5;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.san{
    width: 100%;
    height: 50px;
    border-top: 1px solid #f2f3f5;
    /* background-color:blueviolet; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.two_side{
    width: 100%;
    height: 130px;
    border-bottom: 10px solid #f2f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.two{
    width: 95%;
    height: 85%;
    /* background-color: #4dee63dd; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}
.ding_dan_title{
    width: 100%;
    height: 50px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}
.ding_dan_hao{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shi_jian{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
